<template>
  <div>
      <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="异常处理列表"
        @click-left="$router.back()"
      />
      <div style="background-color:#fff;padding:10px">
        <el-button type="success" size="mini" @click="add">异常处理新增</el-button>
      </div>
    <el-card class="Attence">
       <el-table :data="tableData" style="width:100%">
          <el-table-column label="学号" align="center" width="50">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.studentNo}}</span>
              </template>
          </el-table-column>
          <el-table-column label="班级" align="center" width="50">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.className}}</span>
              </template>
          </el-table-column>
          <el-table-column label="学生姓名" align="center">
              <template slot-scope="scope">
                  <span else-if style="margin-left:10px">{{scope.row.studentName}}</span>
              </template>
          </el-table-column>
          <el-table-column label="宿舍" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.dorAddress}}</span>
              </template>
          </el-table-column>
          <el-table-column label="处理状态" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px" v-if="scope.row.absenceProcessStatus === '1'">联系不上</span>
                  <span style="margin-left:10px" v-if="scope.row.absenceProcessStatus === '2'">已联系上确认迟到</span>
                  <span style="margin-left:10px" v-if="scope.row.absenceProcessStatus === '3'">已联系上确认回家</span>
                  <span style="margin-left:10px" v-if="scope.row.absenceProcessStatus === '4'">已联系上确认擅自离校需进一步处理</span>
              </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-view" circle @click="ExcDetail(scope.row)"></el-button>
                <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
              </template>
          </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {Dialog} from 'vant'
export default {
    name:'AttenceExcList',
    data(){
        return{
            tableData: [],
            date:''
        }
    },
    methods:{
       async getEventListAll(){
            var {data:res} = await this.$axios({
                url:this.$location.getAppExcList
            })
            console.log(res.data)
            this.tableData=res.data
       },
       add() {
           const vm = this;
           vm.$router.push({name: 'ExcAdd', params: { id: 10 }})
       },
       ExcDetail(row){
        //    this.$router.push('/ExcDetail/'+row.id)
           const vm = this;
           vm.$router.push({name: 'ExcDetail', params: { id: row.id}})
       },
       handleEdit(row){
        //    this.$router.push('/ExcEdit/'+row.id)
           const vm = this;
           vm.$router.push({name: 'ExcEdit', params: { id: row.id }})
       },
       handleDelete(row){
        //    deleteExc
        Dialog.confirm({
            title: '提示',
            message: '确认删除？',
            })
            .then(async () => {
                var {data:res} = await this.$axios({
                    url:this.$location.deleteExc,
                    params:{
                        id:row.id
                    }
                })
                if(res.status==200){
                    this.$toast.success(res.msg)
                    this.getEventListAll();
                }else{
                    this.$toast.fail(res.msg)
                    this.getEventListAll();
                }
            })
            .catch(() => {
                // on cancel
            });
       }
    },
    created(){
        this.getEventListAll()
    }
}
</script>

<style lang="less" scoped>
    /deep/ .app-nav-bar{
        background-color: #35d299;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
            
        }
    }
</style>